import Vue from "vue";

import _, { template } from "lodash";

const modalWrap = (
    h,
    content,
    footerEl,
    { modalProps = {}, modalOn = {} } = {}
) => {
    let domSet = {
        props: {
            autoShow: true,
            ...modalProps,
        },
        on: {
            ...modalOn,
        },
    };
    return (
        <com-dialog {...domSet}>
            <template slot="body">{content}</template>
            <template slot="footer">{footerEl}</template>
        </com-dialog>
    );
};

const functionComponentWrap = (render) => {
    return Vue.extend({
        functional: true,
        render,
    });
};

export default {
    namespaced: true,
    state: {
        componentMap: {},
        navRealTimeSign: false,
        navTabList: [],
        loading: null,
        provCode: process.env.VUE_APP_PROV_CODE,
        clientId: process.env.VUE_APP_CLIENT_ID,
        imageView: false,
        anserQuestion:[],
        imageInfo: {
            src: '',
            list: [],
        },
        writeOffMethod:null,
        OffMethodFlag:true,
    },
    mutations: {
        SET_LOADING(state, info) {
            state.loading = info;
        },
        SET_COMPONENT_DATA(state, info) {
            Vue.set(state.componentMap, info.key, info);
        },
        REMOVE_COMPONENT_DATA(state, key) {
            Vue.delete(state.componentMap, key);
        },
        SET_NAV_TAB_LIST_REALTIME(state, info) {
            state.navRealTimeSign = info;
        },
        SET_ANSER_QUETION(state, info) {
            state.anserQuestion.push(info);
        },
        SET_NAV_TAB_LIST(state, info) {
            state.navTabList = info;
            if (state.navRealTimeSign) {
                localStorage.setItem(
                    "cacheNavTabList",
                    JSON.stringify(info.map((v) => ({ ...v, matched: null })))
                );
            }
        },
        DEL_NAV_TAB_LIST: (state, view) => {
            for (const [i, v] of state.navTabList.entries()) {
                if (v.fullPath === view.fullPath) {
                    state.navTabList.splice(i, 1)
                    break
                }
            }
        },
        OPEN_IMAGE(state, {src, list}={}) {
            if(!src) {
                return;
            }
            if(!list || !list.length) {
                list = [src];
            }
            state.imageView = true;
            state.imageInfo = {
                src,
                list,
            };
        },
        CLOSE_IMAGE(state) {
            state.imageView = false;
            state.imageInfo = {
                src: '',
                list: [],
            };
        },
        SET_WRITE_OFF_METHOD(state,info) {
            state.writeOffMethod = info;
        },
        SET_WRITE_OFF_METHODFLAG(state,info) {
            state.OffMethodFlag = info;
        }
    },
    actions: {
        async loading({ state, commit, dispatch }, { vm } = {}) {
            if (state.loading) {
                return state.loading;
            }

            let loading = (vm || g_instance).$loading({
                lock: true,
                text: "请稍等...",
                spinner: "el-icon-loading",
                background: "hsla(0,0%,100%,.9)",
                customClass: "show-loading",
            });

            commit("SET_LOADING", loading);

            return {
                close: () => {
                    commit("SET_LOADING", null);
                    loading.close();
                },
            };
        },
        showDialog({ state, commit, dispatch }, params) {
            let initCompenentKey = params.key;

            commit("SET_COMPONENT_DATA", {
                key: initCompenentKey,
                component: functionComponentWrap(function(h) {
                    let contentEl = params.contentEl;
                    let footerEl = params.footerEl;

                    return modalWrap(h, contentEl, footerEl, {
                        modalProps: params.modalProps,
                        modalOn: params.modalOn,
                    });
                }),
            });

            return {
                close: () => {
                    commit("REMOVE_COMPONENT_DATA", initCompenentKey);
                },
            };
        },
        delView({ state, commit, dispatch }, params) {
            return new Promise(resolve => {
                commit('DEL_NAV_TAB_LIST', params)
                resolve([...state.navTabList])
            })
        },
        closeBreadItem({ state, commit, dispatch }, params){
            let navTabList = state.navTabList
            const list = navTabList.filter(item => {
                return item.fullPath === '/' || item.fullPath === params.fullPath
            })
            commit('SET_NAV_TAB_LIST', list)
        },
        closeBreadAll({ state, commit, dispatch }, params) {
            let navTabList = state.navTabList
            navTabList.splice(1)
            commit('SET_NAV_TAB_LIST', navTabList)
        }
    },
};
